import { useCallback } from 'react';
import { AppRouteObject } from '#/router.ts';
import { ItemType } from 'antd/es/menu/interface';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ css }) => {
  return {
    childItem: css`
      &.ant-menu-submenu-open {
        & > .ant-menu.ant-menu-sub {
          padding-left: 24px !important;
        }
      }
    `,
    menuItem: css`
      color: var(--ycx-font-color-l3) !important;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px; /* 166.667% */

      &.ant-menu-item-selected {
        color: var(--ycx-primary-color) !important;
      }
    `,
  };
});

export const useRouteToMenuFn = () => {
  const DefaultIcon = () => {
    return <span style={{ marginRight: '10px' }}>-</span>;
  };
  const { styles } = useStyle();
  const routeToMenuFn = useCallback((items: AppRouteObject[], depth = 1) => {
    return items
      .filter((item) => !item.meta?.hideMenu)
      .map((item) => {
        const menuItem: any = [];
        const { meta, children } = item;
        if (meta) {
          const { key, label, icon } = meta;
          menuItem.key = key;
          menuItem.label = label;
          menuItem.icon = icon;
          if (depth === 1) menuItem.className = styles.childItem;
          if (depth === 3) {
            menuItem.className = styles.menuItem;
            menuItem.icon = <DefaultIcon />;
          }

          if (children) {
            const a = routeToMenuFn(children, depth + 1);
            if (a.length > 0) menuItem.children = a;
          }
        }
        return menuItem as ItemType;
      });
  }, []);

  return routeToMenuFn;
};
